<html>
<body>
	<wicket:panel>
		<table>
			<tr>
				<td wicket:id="headline" id="headline" class="headline" style="background-color:#AAFFAA;width:335px" onClick="javascript:ToggleFloatingLayer();"></td>
				<td><div id="arrow" onClick="javascript:ToggleFloatingLayer();"><a href="#"><img wicket:id = "arrow"/></a></div></td>
			</tr>
			<tr>
				<td>
					<!-- Start Floating Layer -->
					<div id="FloatingLayer" style="position:relative;left:-1;top:-4;display:none;height:100px;overflow-x: hidden; overflow-y: scroll"> 
					  <table border="0" width="320px" bgcolor="#AAFFAA" cellspacing="0" cellpadding="5">
					    <tr> 
					      <td width="100%">
					              <!-- place your HTML content here-->
								 <span wicket:id="choices"></span>
					              <!-- End of content area -->
					      </td>
					    </tr>
					  </table>
					</div>
					<div id="FloatingLayerFooter" style="position:relative;left:-1;top:-4;display:none"> 
					  <table border="0" width="335px" bgcolor="#00CC00" cellspacing="0" cellpadding="5">
					    <tr> 
					      <td width="100%">
					      	<ilayer width="100%" onSelectStart="return false"> 
					              <layer width="100%" onMouseover="isActive=true" onMouseout="isActive=false"> 
					              <font face="Arial" color="#FFFFFF" size="-1"><a href="#" onClick="checkAll(document.forms[0].choices)">All</a>/<a href="#" onClick="uncheckAll(document.forms[0].choices)">None</a></font></layer>
					        </ilayer>
					      </td>
					      <td style="cursor:hand" valign="top"> <a href="#" onClick="ToggleFloatingLayer();return false"><font color="#ffffff" size="2" face="arial"  style="text-decoration:none">X</font></a> 
					      </td>
					    </tr>
					  </table>
					</div>
					<!-- End Floating layer -->
				</td>
				<td></td>
			</tr>
		</table>
		
		<div style="display:none">
			<span wicket:id="choices2"></span>
		</div>
		
<script type="text/javascript" wicket:id="myScript">/* script will be rendered here */</script>

<script type="text/javascript">
document.onclick=check;

function check(e){
	var target = (e && e.target) || (event && event.srcElement);
	var obj  = document.getElementById('FloatingLayer');
	var obj2 =  document.getElementById('FloatingLayerFooter');
	if (checkParent(target,'FloatingLayerFooter') && checkParent(target,'arrow') && checkParent(target,'headline')) {
		if (checkParent(target,'FloatingLayer')) {
			obj.style.display='none';
			obj2.style.display='none';
			// check change
			if (!checkchange()) {
				callWicket(generateParamString());
			}
		} else {
			obj.style.display='block';
			obj2.style.display='block';
		}
	}
}
function checkParent(t,node){
	while(t.parentNode){
		if(t==document.getElementById(node)){
			return false;
		}
		t=t.parentNode;
	}
	return true;
}
</script>

<script language="JavaScript1.2">

function ToggleFloatingLayer()
{
	var obj  = document.getElementById('FloatingLayer');
	var obj2 = document.getElementById('FloatingLayerFooter');
	if (obj.style.display=='none') { 
		obj.style.display='block'; 
		obj2.style.display='block';
	} else  { 
		obj.style.display='none'; 
		obj2.style.display='none';
		// check change
		if (!checkchange()) {
			callWicket(generateParamString());
		}
	}
}

function checkAll(field)
{
	for (i = 0; i < field.length; i++)
		field[i].checked = true ;
}
function uncheckAll(field)
{
	for (i = 0; i < field.length; i++)
		field[i].checked = false ;
}

function checkchange() {
	var samesame = true;
	var current	= document.forms[0].choices;
	var old		= document.forms[0].choices2;
	for (i = 0; i < current.length; i++) {
		if (current[i].checked != old[i].checked) {
			samesame = false;
			old[i].checked = current[i].checked;
		}
	}
	return samesame;
}

function generateParamString() {
	var old		= document.forms[0].choices2;
	var pa = "&title=";
	var ram = "";
	for (i = 0; i < old.length; i++) {
		if (old[i].checked == true) {
			if (ram != "") {
				ram = ram + "|";
			}
			ram = ram + i;
		}
	}
	if (ram == "") return ram;
	var param = pa + ram;
	return param;
}
</script>

	</wicket:panel>
</body>
</html>